<template>
  <div>
    <el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body :before-close="close">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="demo-ruleForm">
        <el-divider content-position="center">报关信息</el-divider>
        <el-row>
          <el-col :span="8">
            <el-form-item label="工作号" prop="job_number">
              <el-select v-model="form.job_number" placeholder="" clearable style="width: 100%">
                <el-option
                  v-for="(item, index) in job_number_data"
                  :key="index"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="申报单位" prop="declaration_unit">
              <el-input v-model="form.declaration_unit" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="申报日期" prop="declare_date">
              <el-date-picker v-model="form.declare_date" value-format="yyyy-MM-dd" type="date" placeholder="申报日期" style="width: 100%;" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="进/出口" prop="enter_out">
              <el-select v-model="form.enter_out" placeholder="进/出口" clearable style="width: 100%">
                <el-option label="进口" value="1" />
                <el-option label="出口" value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="进/出口日期" prop="enter_out_date">
              <el-date-picker v-model="form.enter_out_date" value-format="yyyy-MM-dd" type="date" placeholder="进/出口日期" style="width: 100%;" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="境内发货人" prop="consignor">
              <el-input v-model="form.consignor" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="境外收货人" prop="consignee">
              <el-input v-model="form.consignee" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="备案号" prop="record_number">
              <el-input v-model="form.record_number" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="运输方式" prop="transport_type">
              <el-input v-model="form.transport_type" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="运输工具名称及航次号" prop="transport_name_voyage">
              <el-input v-model="form.transport_name_voyage" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="提运单号" prop="delivery_number">
              <el-input v-model="form.delivery_number" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="生产销售单位" prop="sale_unit">
              <el-input v-model="form.sale_unit" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="监管方式" prop="supervise_mode">
              <el-input v-model="form.supervise_mode" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="征免行政" prop="exemption">
              <el-input v-model="form.exemption" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="许可证号" prop="licence">
              <el-input v-model="form.licence" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="合同协议号" prop="supervise_mode">
              <el-input v-model="form.supervise_mode" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="贸易国" prop="tradeCountry">
              <el-input v-model="form.tradeCountry" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="运抵国" prop="shipToCountry">
              <el-input v-model="form.shipToCountry" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="指运港" prop="appointPort">
              <el-input v-model="form.appointPort" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="离镜口岸" prop="departurePort">
              <el-input v-model="form.departurePort" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="包装种类" prop="packing_type">
              <el-input v-model="form.packing_type" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="件数" prop="piece_num">
              <el-input v-model="form.piece_num" type="number" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="毛重" prop="gross_weight">
              <el-input v-model="form.gross_weight" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="净重" prop="net_weight">
              <el-input v-model="form.net_weight" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="成交方式" prop="deal">
              <el-input v-model="form.deal" type="number" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="运费" prop="freight">
              <el-input v-model="form.freight" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="保费" prop="premium">
              <el-input v-model="form.premium" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="杂费" prop="incidental">
              <el-input v-model="form.incidental" type="number" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="随附单证及编号" prop="attached">
              <el-input v-model="form.attached" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="备注" prop="remarks">
              <el-input v-model="form.remarks" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-divider content-position="center">商品信息</el-divider>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
            >新增</el-button>
          </el-col>
        </el-row>
        <el-table :data="tableData" style="width: 100% " stripe border>
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="工作号">
                  <span>{{ props.row.job_number }}</span>
                </el-form-item>
                <el-form-item label="进/出口日期">
                  <span>{{ props.row.enter_out_date }}</span>
                </el-form-item>
                <el-form-item label="关区代码">
                  <span>{{ props.row.customs_district }}</span>
                </el-form-item>
                <el-form-item label="经营单位">
                  <span>{{ props.row.business_unit }}</span>
                </el-form-item>
                <el-form-item label="报关件数">
                  <span>{{ props.row.declare_piece }}</span>
                </el-form-item>
                <el-form-item label="报关毛重">
                  <span>{{ props.row.declare_gross_weight }}</span>
                </el-form-item>
                <el-form-item label="金额描述">
                  <span>{{ props.row.money_describe }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column prop="declare_date" label="申报日期">
            <template slot-scope="scope">
              {{ scope.row.declare_date }}
            </template>
          </el-table-column>
          <el-table-column prop="enter_out" label="进/出">
            <template slot-scope="scope">
              <span v-if="scope.row.enter_out === '1'">进口</span>
              <span v-if="scope.row.enter_out === '2'">出口</span>
            </template>
          </el-table-column>
          <el-table-column prop="declare_number" label="报关单号">
            <template slot-scope="scope">
              {{ scope.row.declare_number }}
            </template>
          </el-table-column>
          <el-table-column prop="single_copy_num" label="联单数">
            <template slot-scope="scope">
              {{ scope.row.single_copy_num }}
            </template>
          </el-table-column>
          <el-table-column prop="product_num" label="品名数">
            <template slot-scope="scope">
              {{ scope.row.product_num }}
            </template>
          </el-table-column>
          <el-table-column prop="trade_mode" label="贸易方式">
            <template slot-scope="scope">
              <span v-if="scope.row.trade_mode === '1'">一般贸易</span>
            </template>
          </el-table-column>
          <el-table-column prop="enter_out_port" label="进出口岸">
            <template slot-scope="scope">
              {{ scope.row.enter_out_port }}
            </template>
          </el-table-column>
          <el-table-column prop="detailed_code" label="清单编码">
            <template slot-scope="scope">
              {{ scope.row.detailed_code }}
            </template>
          </el-table-column>
          <el-table-column prop="customs_code" label="18位海关编码">
            <template slot-scope="scope">
              {{ scope.row.customs_code }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="handleEdit(scope.row)"
              >修改
              </el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDel(scope.row)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row style="top: 30px;margin-bottom: 30px;text-align:center;">
          <el-col :span="24">
            <el-button type="primary" size="medium" @click="submitForm('form')">{{ title }}</el-button>
            <el-button size="medium" @click="close()">取消</el-button>
          </el-col>
        </el-row>

      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { reportCreate, reportEdit } from '@/api/report'
import { getJobNumber } from '@/api/business'
export default {
  name: 'AddEdit',
  props: {
    open: {
      type: Boolean
    },
    form: {
      type: Object
    },
    title: {
      type: String
    }
  },
  data() {
    return {
      activeName: 'basic',
      job_number_data: [],
      rules: {
        job_number: [
          { required: true, message: '工作号', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.JobNumber()
  },
  methods: {
    JobNumber() {
      getJobNumber().then(response => {
        if (response.code === 10000) {
          this.job_number_data = response.data
        }
      })
    },
    submitForm(formName) {
      const that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (that.title === '添加') {
            this.add()
          } else {
            this.edit()
          }
        } else {
          return false
        }
      })
    },
    add() {
      const that = this
      reportCreate(that.form).then(response => {
        if (response.code === 10000) {
          that.$message.success(response.message)
          that.$parent.getList()
          that.$emit('update:open', false)
        }
      })
    },
    edit() {
      const that = this
      reportEdit(that.form).then(response => {
        if (response.code === 10000) {
          that.$message.success(response.message)
          that.$parent.getList()
          that.$emit('update:open', false)
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    close() {
      this.$emit('update:open', false)
    }
  }
}
</script>
<style>

.demo-table-expand label {
  width: 40%;
}

</style>

